<template>
  <div class="component">
    <div class="container-center">
      <div class="over-hidden">
        <router-link
          class="btn btn-default pull-right icon icon-arrowsleftline mt-lg"
          :to="getMicroRoute('/tools')"
        >
          返回列表</router-link>
        <h2 class="text-left">16进制转换</h2>
      </div>
      <div class="row">
        <div class="col-xs-6 row-cell">
          <div class="form-group">
            <label class="form-label">输入文本：</label>
            <div class="form-field">
              <textarea class="form-textarea json-input" rows="4" v-model="inputData"></textarea>
            </div>
          </div>
        </div>
        <div class="col-xs-6 row-cell">
          <div class="form-group">
            <label class="form-label">输出文本：</label>
            <div class="form-field">
              <textarea class="form-textarea json-input" rows="4" v-model="outputData"></textarea>
            </div>
          </div>
        </div>
        <div class="row-cell clear pt-sm mb-sm">
          <div class="pull-left">
            <a class="btn btn-default mr-md" @click="encodeUrlHex">16进制加密</a>
            <a class="btn btn-default mr-md" @click="decodeUrlHex">16进制解密</a>
            <a class="btn btn-default mr-md" @click="strToHexCharCode">URL16进制加密</a>
            <a class="btn btn-default" @click="hexCharCodeToStr">URL16进制解密</a>
          </div>
          <div class="pull-right">
            <span class="form-inline">
              <SwitchRich v-model="isPipe" label="覆盖输入" />
            </span>
            <Pipe name="urlhex" :operation="{inputData: outputData}" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SwitchRich from '@/components/vue/components/switch-rich/2.0/switch-rich.vue'
import { strer } from '@daelui/dogjs/dist/components'
import Pipe from '../index/pipe.vue'

/* 加密与解密 */
export default {
  components: {
    SwitchRich,
    Pipe
  },

  data () {
    return {
      inputData: '',
      outputData: '',
      isPipe: false
    }
  },

  methods: {
    /**
     * @function URL16进制加密
    */
    encodeUrlHex () {
      var str = this.inputData
      var str2 = ''
      if (str.substring(0, 7) === 'http://') {
        str2 = 'http://'
        str = str.substring(7, str.length)
      }
      else if (str.substring(0, 8) === 'https://') {
        str2 = 'https://'
        str = str.substring(8, str.length)
      }
      let isHash = false
      for (var i = 0; i < str.length; i++) {
        let code = String(str.charCodeAt(i))
        if (isHash) {
          str2 += str[i]
        }
        else if (code === '35') {
          str2 += '#'
          isHash = true
        }
        else if (code === '47') {
          str2 += '/'
        }
        else if (code === '63') {
          str2 += '?'
        }
        else if (code === '38') {
          str2 += '&'
        }
        else if (code === '61') {
          str2 += '='
        }
        else if (code === '58') {
          str2 += ':'
          isHash = true
        }
        else {
          str2 += '%' + str.charCodeAt(i).toString(16)
        }
      }
      this.outputData = str2
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    },

    /**
     * @function URL16进制解密
    */
    decodeUrlHex () {
      var str = this.inputData
      var str2 = ''
      str2 = str.replace(/%\w+/g, function (s) {
        s = s.replace('%', '')
        var curCharCode = parseInt(s, 16) // ASCII Code Value
        return String.fromCharCode(curCharCode)
      })
      this.outputData = str2
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    },

    /**
     * @function 16进制加密
    */
    strToHexCharCode () {
      var str = this.inputData
      var str2 = strer.strToHexCharCode(str)
      this.outputData = str2
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    },

    /**
     * @function 16进制解密
    */
    hexCharCodeToStr () {
      var str = this.inputData
      var str2 = strer.hexCharCodeToStr(str)
      this.outputData = str2
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    }
  },

  mounted () {
    // 管道数据
    if (this.$store.state.inputData) {
      this.inputData = this.$store.state.inputData
      this.$store.state.inputData = ''
    }
    // 初始处理
    this.encodeUrlHex()
  }
}
</script>

<style lang="less">

</style>
